export default{
    //初始化加载html
    initHtml(ScreenData,searchBoxId,loadback,searchBack){
        var formID = ScreenData.component[0].cpname+"_search"
        var html =  `<div class="well well-sm" style="margin: 0">
                        <div class="clearfix">
                            <div class="control-group pull-left" style="width: 70%;">
                                <form id="`+formID+`" class="" onsubmit="return false">
                                    <div data-line="0" class="custom_search" style="min-height: 30px;display: table;">

                                    </div>
                                </form>
                            </div>
                            <div class="pull-right">
                                
                            </div>
                        </div>
                    </div>`;
        $(searchBoxId).append(html)


        this.init(ScreenData,formID,function(){
            loadback()
        },searchBack)
    },

    init(ScreenData,appendId,callback,searchBack){
        appendId = "#"+appendId;
        $.each(ScreenData.component_form,function(key,value){
            if(value.custom!="0"){
                var html = ""
                switch (value.type) {
                case 'checkbox':
                    var checked=""
                    if(value.checked=="checked"){
                        checked='checked="checked"'
                    }
                    html =	'<label class="control-label '+value["class"]+' " style="margin:5px 5px 0px 0px">'+
                                '<input name="'+value.name+'" value="yes" type="checkbox" class="ace" '+checked+'>'+
                                '<span class="lbl">'+
                                    value.text+
                                '</span>'+ 
                            '</label>';
                    break;
                case 'radio':
                    var checked=""
                    if(value.checked=="checked"){
                        checked='checked="checked"'
                    }
                    html =	'<label class="control-label '+value["class"]+' " style="margin:5px 5px 0px 0px">'+ 
                                '<input name="'+value.name+'" value="'+value.value+'" type="radio" class="ace" '+checked+'>'+ 
                                '<span class="lbl">'+value.text+'</span>'+ 
                            '</label>';
                    break;
                case 'text':
                    var textValue = "";
                    if(value.value!=""){
                        textValue = eval(value.value)
                    }
                    html = 	'<label style="min-width:63px;padding-right:6px;text-align:right">'+value.text+'</label>'+
                            '<input type="'+value.type+'" id="'+value.name+'" name="'+value.name+'" class="'+value["class"]+'" style="height:28px;" value="'+textValue+'">';
//						if(param.selectDivId!="" && $("#"+param.selectDivId+" option[value='"+value.name+"']").size()<=0){
//							$("#"+param.selectDivId).append('<option value="'+value.name+'">'+value.text+'</option>')
//						}
                    break;
                case 'title':
                    html = 	'<label style="min-width:63px;margin-top: 5px;padding-right:6px;'+value["class"]+'">'+value.text+'</label>';
                    break;
                case 'select':
                    var option_html = ''
                        $.each(JSON.parse(value.options),function(kk,vv){
                            option_html+='<option value="'+vv.code+'">'+vv.descript+'</option>'
                        })
                    html = 	'<label style="min-width:63px;padding-right:6px;text-align:right">'+value.text+'</label>'+
                            '<select id="'+value.name+'" name="'+value.name+'" style="height:29.5px;width:150px;">'+option_html+'</select>';
                    break;
                case 'multiselect':
                    var option_html = ''
                        $.each(JSON.parse(value.options),function(kk,vv){
                            option_html+='<option value="'+vv.code+'">'+vv.descript+'</option>'
                        })
                    html = 	'<label style="min-width:63px;padding-right:6px;text-align:right">'+value.text+'</label>'+
                            '<select id="'+value.name+'" name="'+value.name+'" class="multiselect" multiple="" style="height:29.5px;">'+option_html+'</select>';
                    break;
                } 
                    
                    
                if($(appendId).find("div[data-line='"+value.row+"']").size()<=0){
                    $(appendId).append('<div class="" style="min-height: 30px;display: table;" data-line="'+value.row+'"></div>')
                }
                
                if($(appendId).find("div[data-line='"+value.row+"']").find("div[name='"+value.name+"']").size()<=0){
                    $(appendId).find("div[data-line='"+value.row+"']").append('<div style="float: left;margin-right: 5px;margin-top: 5px;" name="'+value.name+'"></div>')
                }
                
                if(value.type=="text"){
                    if($("input[name='"+value.name+"']").size()<=0){
                        $(appendId).find("div[data-line='"+value.row+"']").find("div[name='"+value.name+"']").append(html)
                    }
                }else{
                    $(appendId).find("div[data-line='"+value.row+"']").find("div[name='"+value.name+"']").append(html)
                }
                
                $(appendId).find('.date-picker').datepicker({
                    autoclose : true,
                    language : 'zh-CN',
                    format : 'yyyymmdd',
                    todayHighlight: true,
                    todayBtn:'linked',
                    clearBtn: true,
                });
                
                $(appendId).find('.time-picker').timepicker({
                    minuteStep: 1,
                    showSeconds: false,
                    showMeridian: false,
                    use24hours: true,
                    format: 'HH:mm',
                    defaultTime:false,
                })
                
                $(appendId).find("select[class='multiselect']").multiselect({
                    maxHeight:$(window).height()-428,
                    nonSelectedText:"", 
                    enableFiltering: true,
                    numberDisplayed:1000,
                    allSelectedText:"已选择全部",
                    buttonClass: 'btn btn-white btn-primary',
                    templates: {
                        button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown" style="font-size: 13px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;width:149px;height:29.5px;padding:0px 5px;border: 1px solid #D5D5D5;color: #858585 !important;"></button>',
                        ul: '<ul class="multiselect-container dropdown-menu"></ul>',
                        filter: '<li class="multiselect-item filter"><div class="input-group"><input class="form-control multiselect-search" type="text" style="height: 28px;"></div></li>',
                        filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button" style="height: 28px;line-height:14px"><i class="fa fa-times-circle red2"></i></button></span>',
                        li: '<li><a href="javascript:void(0);"><label></label></a></li>',
                        divider: '<li class="multiselect-item divider"></li>',
                        liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
                    },
                    onDropdownHide:function(){
                        searchBack()
                    }
                });
                $(appendId).find(".multiselect .fa-caret-down").css("cssText","float:right !important;");
            }
        })


        //input点击enter事件
        $(appendId).find("input").keydown(function(e){
            if(e.keyCode=="13"){
                searchBack()
            }
        });

        //input点击enter事件
        $(appendId).find("input.time-picker,input.date-picker,input.datetime-picker").unbind("change").change(function(e){
            searchBack()
        });

        //radio改变事件
        $(appendId).find("input[type=radio]").unbind("change").change(function(){
            searchBack()
        });

        //checkbox改变事件
        $(appendId).find("input[type=checkbox]").unbind("change").change(function(){
            searchBack()
        });

        //checkbox改变事件
        $(appendId).find("select").unbind("change").change(function(){
            searchBack()
        });

        callback()

    },

    
}
